<template>
  <div class="wrap">
    <el-tabs  @tab-click="tabClick">
      <el-tab-pane :label="$t('message.InterferenceCheckDlg.dlgTabNameMovePart')">
        <div class="d-flex align-items-center">
          <label class="el-form-item__label">{{ $t('message.InterferenceCheckDlg.dlgLabelTitleMoveFormat') }}:</label>
          <el-select v-model="moveType">
            <el-option
              v-for="item in moveTypeList"
              :key="item.value"
              :label="item.text"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!--          沿实体移动-->
        <template v-if="moveType === TransformType.moveByEntity">
          <query-list v-model="params.moveDir"
                      :description="$t('message.InterferenceCheckDlg.dlgQueryListMoveTip')"
                      :active="params.queryListActiveMap.moveDir"
                      :tipMsg="$t('message.InterferenceCheckDlg.dlgQueryListMoveDes')">
          </query-list>
        </template>
        <!--          移动至XYZ-->
        <template v-else-if="moveType === TransformType.moveToXYZ">
          <div class="dialog-row">
            <div class="d-flex mt-2 align-items-center">
              <label class="el-form-item__label">X：</label>
              <el-input v-model.number="params.offsetValX"
                        type = "number"
                        @change="changePos($event, 'X')"/>
            </div>
            <div class="d-flex align-items-center">
              <label class="el-form-item__label">Y：</label>
              <el-input v-model.number="params.offsetValY"
                        type = "number"
                        @change="changePos($event, 'Y')"/>
            </div>
            <div class="d-flex align-items-center">
              <label class="el-form-item__label">Z：</label>
              <el-input v-model.number="params.offsetValZ"
                        type = "number"
                        @change="changePos($event, 'Z')"/>
            </div>
          </div>
        </template>
        <!--          移动XYZ-->
        <template v-else-if="moveType === TransformType.moveByXYZ">
          <div class="dialog-row">
            <div class="d-flex mt-2 align-items-center">
              <label class="el-form-item__label">△X：</label>
              <el-input v-model.number="params.offsetValX"
                        type = "number"
                        @change="changePos($event, 'X')"/>
              <label class="el-form-item__label">mm</label>
            </div>
            <div class="d-flex align-items-center">
              <label class="el-form-item__label">△Y：</label>
              <el-input v-model.number="params.offsetValY"
                        type = "number"
                        @change="changePos($event, 'Y')"/>
              <label class="el-form-item__label">mm</label>
            </div>
            <div class="d-flex align-items-center">
              <label class="el-form-item__label">△Z：</label>
              <el-input v-model.number="params.offsetValZ"
                        type = "number"
                        @change="changePos($event, 'Z')"/>
              <label class="el-form-item__label">mm</label>
            </div>
          </div>
        </template>

      </el-tab-pane>
      <el-tab-pane :label="$t('message.InterferenceCheckDlg.dlgTabNameRotatePart')">
        <div class="d-flex align-items-center">
          <label class="el-form-item__label">{{ $t('message.InterferenceCheckDlg.dlgLabelTitleRotateFormat') }}:</label>
          <el-select v-model="rotateType">
            <el-option
              v-for="item in rotateTypeList"
              :key="item.value"
              :label="item.text"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!--          沿轴旋转-->
        <template v-if="rotateType === TransformType.rotateByEntity">
          <query-list v-model="params.moveDir"
                      :description="$t('message.InterferenceCheckDlg.dlgQueryListRotateTip')"
                      :active="params.queryListActiveMap.moveDir"
                      :tipMsg="$t('message.InterferenceCheckDlg.dlgQueryListRotateDes')">
          </query-list>
        </template>
        <!--          以XYZ轴旋转-->
        <template v-else-if="rotateType === TransformType.rotateByXYZ">
          <div class="dialog-row">
            <div class="d-flex mt-2 align-items-center">
              <label class="el-form-item__label">△X：</label>
              <el-input v-model.number="params.angleValX"
                        type = "number"
                        min="-360"
                        max="360"
                        @change="changePos($event, 'X')"/>
              <label class="el-form-item__label">°</label>
            </div>
            <div class="d-flex align-items-center">
              <label class="el-form-item__label">△Y：</label>
              <el-input v-model.number="params.angleValY"
                        type = "number"
                        min="-360"
                        max="360"
                        @change="changePos($event, 'X')"/>
              <label class="el-form-item__label">°</label>
            </div>
            <div class="d-flex align-items-center">
              <label class="el-form-item__label">△Z：</label>
              <el-input v-model.number="params.angleValZ"
                        type = "number"
                        min="-360"
                        max="360"
                        @change="changePos($event, 'X')"/>
              <label class="el-form-item__label">°</label>
            </div>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
    <div class="btn">
      <el-button type="primary"
                 size="small"
                 v-show="applyShow"
                 :disabled="!applyButtonState"
                 @click="applyXYZTransform">
        {{$t('message.InterferenceCheckDlg.dlgButtonTitleApply')}}
      </el-button>
      <el-button
        size="small"
        @click="close">
        {{ $t('message.InterferenceCheckDlg.dlgBtnCloseTitle') }}
      </el-button>
    </div>
  </div>
</template>

<script>

import {interferenceCheckCommand} from "../../../Command/InterferenceCheck/InterferenceCheckCommand";
import {language} from "../../../util/Language";
import {float} from "three/nodes";
import DialogMixin from "../DialogMixin";

const TransformType = {
  moveForFree: 11,
  moveByAssemblyXYZ: 12,
  moveByEntity: 13,
  moveByXYZ: 14,
  moveToXYZ: 15,
  moveByCoordinateSys: 16,
  rotateForFree: 21,
  rotateByEntity: 22,
  rotateByXYZ: 23,
  rotateByCoordinateSys: 24,
};
export default {
  mixins: [DialogMixin],
  data: function () {
    return {
      cmdMode: 'CmdHFToolsCheckTransformInterference',
      TransformType: TransformType,
      moveType:11,
      rotateType:21,
      useApplyButton:false,
      applyShow:false,
      setActiveMap(activeName){
        for (let name in this.params.queryListActiveMap) {
          if (name === activeName){
            this.params.queryListActiveMap[name] = 1;
          } else {
            this.params.queryListActiveMap[name] = 0;
          }
        }
      },

      params: {
        canDrag: true,
        curTab: "TabMove",
        sum: 0,
        pickPnt: null,
        axialDir: null,
        dragPnt: null,
        checkStop: 0,
        assemblyCheckInter: true,
        checkInterForScope: 0,
        transformType: 11,
        rotateType: 0,
        moveDir: [],
        alongXYZMoveDir: null,
        selCheckInterInstance: [],
        revolveAxis: [],
        selInstance: [],
        offsetValX: 0,
        offsetValY: 0,
        offsetValZ: 0,
        angleVal: 0,
        angleValX: 0,
        angleValY: 0,
        angleValZ: 0,
        refCoordinateSys: [],
        targetCoordinateSys: [],
        queryListActiveMap: {
          selInstance: 1,
          selCheckInterInstance: 0,
          moveDir: 0,
          revolveAxis: 0,
          refCoordinateSys: 0,
          targetCoordinateSys: 0,
        },
        lockedProperty: {
          selInstance: false,
          copyFlg: false,
        },
        canPreview: true,
      },

      rotateMinBoundary:-360,
      rotateMaxBoundary:360,
      dragPnt2d:new THREE.Vector2(0,0),

      moveTypeList:[
        {text:language.getMessage('message.InterferenceCheckDlg.dlgSelectMoveDrag'), value: 11},
        {text:language.getMessage('message.InterferenceCheckDlg.dlgSelectMoveAlongPrdXYZ'), value: 12},
        //{text:language.getMessage('message.InterferenceCheckDlg.dlgSelectMoveAlongEntity'), value: 13},
        {text:language.getMessage('message.InterferenceCheckDlg.dlgSelectMoveXYZParams'), value: 14},
        {text:language.getMessage('message.InterferenceCheckDlg.dlgSelectMoveToXYZPos'), value: 15},
        //{text:language.getMessage('message.InterferenceCheckDlg.dlgSelectMoveCorSys'), value: 16}
      ],
      rotateTypeList:[
        {text:language.getMessage('message.InterferenceCheckDlg.dlgSelectRotateDrag'), value: 21},
        //{text:language.getMessage('message.InterferenceCheckDlg.dlgSelectRotateAlongEntity'), value: 22},
        {text:language.getMessage('message.InterferenceCheckDlg.dlgSelectRotateXYZParams'), value: 23},
        //{text:language.getMessage('message.InterferenceCheckDlg.dlgSelectRotateCorSys'), value: 24}
      ],
    };
  },
  //!<命令启动时
  mounted: function () {
    interferenceCheckCommand.init(400,300,500,() => {
      interferenceCheckCommand.setSelectEnable(false);
      interferenceCheckCommand.calculateTransformInterferenceCheck(this.params);
      //注册拾取事件
      // interferenceCheckCommand.handlePickInstance((data) => {
      //   this.params.selInstance = [];
      //   data.forEach(instance=>{
      //     instance.instanceId = instance.id;
      //     this.$delete(instance,'id');
      //     this.params.selInstance.push(instance);
      //   })
      // });
      //注册鼠标左键按下时移动事件，并执行动态干涉检查操作
      // interferenceCheckCommand.handleMouseLeftMove((e) => {
      //   //在鼠标左键按下并进行移动的时候，进行动态干涉检查的相关响应事件
      //   interferenceCheckCommand.calculateTransformInterferenceCheck();
      // });
    });
  },
  methods: {
    changePluginContainerHeight() {
      interferenceCheckCommand.changePluginContainerHeight({minWidth: this.$el.clientWidth, maxHeight: this.$el.clientHeight});
    },
    tabClick(tab,event){
      if(tab.index === "0"){
        this.params.curTab = "TabMove";
      }
      else{
        this.params.curTab = "TabRotate";
      }
    },
    changePos(value, type) {

    },
    applyXYZTransform() {
      //this.preview();
      interferenceCheckCommand.calculateTransformInterferenceXYZTrans(this.params);
    },
    preview() {
      if (this.params.selInstance.length === 0) {
        return;
      }
      //instance参数
      let instanceIds = [];
      this.params.selInstance.forEach(instanceData =>{
        instanceIds.push(instanceData.instanceId);
      });
      //干涉检查参数,是否对干涉内容进行渲染显示
      let checkType = 0;
      if (this.params.assemblyCheckInter) {
        checkType = 1;
        if (this.params.checkStop) {
          checkType = 2;
        }
      }
      //检查范围
      let checkRange = [];
      if (this.params.checkInterForScope === 1 && this.params.selCheckInterInstance.length > 0) {
        //checkRange = this.params.selCheckInterInstance.map(e => e.instanceId);
      }

      //Todo 坐标系类型
      let refCoordinateSystem,targetCoordinateSystem;
      {
        refCoordinateSystem = {
          coordinateSysUUID: -1,
          coordinatedSysCompIns: null
        };
        targetCoordinateSystem = {
          coordinateSysUUID: -1,
          coordinatedSysCompIns: null
        };
        if (this.params.transformType === TransformType.moveByCoordinateSys || this.params.transformType === TransformType.rotateByCoordinateSys) {
          //refCoordinateSystem = this.getCoordinateSysParamId(infoReference.getRef(this.params.refCoordinateSys[0]));
          //targetCoordinateSystem = this.getCoordinateSysParamId(infoReference.getRef(this.params.targetCoordinateSys[0]));
        }
      }

      let transformParams;
      if (this.params.curTab === 'TabRotate') {
          //构建旋转轴
        //let rotateAxis = buildAxis(this.params.revolveAxis, null, false);
        let rotateAxis;
        let angleValX = this.params.angleValX;
        let angleValY = this.params.angleValY;
        let angleValZ = this.params.angleValZ;
        let angleVal = this.params.angleVal;
        let axialDir = new THREE.Vector3();
        if (this.params.transformType === TransformType.rotateForFree && this.params.axialDir) {
          axialDir = this.params.axialDir;
        }
        if (this.params.transformType === TransformType.rotateByEntity || this.params.transformType === TransformType.rotateForFree) {
          this.params.pickPnt2d = this.dragPnt2d.clone();
        }
        if (this.params.transformType === TransformType.rotateForFree) {
          this.params.pickPnt = this.params.dragPnt.clone();
        }

        transformParams = {
          PosTransformType: "Rotate",
          TransformType:this.rotateType,
          rotateType: this.rotateType - 21,
          instanceIds:instanceIds,
          rotateAxis:rotateAxis,
          angleVal:angleVal,
          angleValX:angleValX,
          angleValY:angleValY,
          angleValZ:angleValZ,
          axialDir:axialDir,
          checkRange:checkRange,
          checkType:checkType,
          refCoordinateSysUUID:refCoordinateSystem.coordinateSysUUID,
          refCoordinateSysCompIns:refCoordinateSystem.coordinatedSysCompIns,
          targetCoordinateSysUUID:targetCoordinateSystem.coordinateSysUUID,
          targetCoordinateSysCompIns:targetCoordinateSystem.coordinatedSysCompIns
        }
      } else {
        let startPos = this.params.pickPnt;
        let endPos = this.params.dragPnt;
        let varX = this.params.offsetValX;
        let varY = this.params.offsetValY;
        let varZ = this.params.offsetValZ;
        let moveDir = {};

        if (this.params.transformType === TransformType.moveByEntity) {
          //moveDir = buildAxis(this.params.moveDir, null, false);
        } else if (this.params.transformType === TransformType.moveByAssemblyXYZ) {
          moveDir.v1 = new THREE.Vector3(0, 0, 0);
          moveDir.v2 = this.params.alongXYZMoveDir.clone();
        }

        transformParams = {
          PosTransformType: "Move",
          TransformType:this.moveType,
          moveType: this.moveType - 11,
          instanceIds:instanceIds,
          startPos:startPos,
          endPos:endPos,
          moveDir:moveDir,
          varX:varX,
          varY:varY,
          varZ:varZ,
          checkRange:checkRange,
          checkType:checkType,
          refCoordinateSysUUID:refCoordinateSystem.coordinateSysUUID,
          refCoordinateSysCompIns:refCoordinateSystem.coordinatedSysCompIns,
          targetCoordinateSysUUID:targetCoordinateSystem.coordinateSysUUID,
          targetCoordinateSysCompIns:targetCoordinateSystem.coordinatedSysCompIns
        }
      }


      //传参进行计算
      interferenceCheckCommand.calculateTransformInterferenceCheck(transformParams,(data) => {

      })
    },
    close(){
      interferenceCheckCommand.closeActiveCmd();
    },
  },
  computed: {
    applyButtonState() {
      return true;
    },
  },
  watch: {
    "moveType":function (){
      if(this.moveType === 11 ||this.moveType === 12 ||this.moveType === 13){
        interferenceCheckCommand.setSelectEnable(false);
        this.params.canDrag = true;
        if(this.moveType === 13){
          this.setActiveMap("moveDir");
        }else{
          this.setActiveMap("selInstance");
        }
      }else{
        interferenceCheckCommand.setSelectEnable(true);
        this.params.canDrag = false;
        this.setActiveMap("selInstance");
      }
      //修改应用按钮显示状态
      if(this.moveType === 14 || this.moveType === 15){
        this.applyShow = true;
      }else{
        this.applyShow = false;
      }


      this.params.transformType = this.moveType;
      interferenceCheckCommand.calculateTransformInterferenceCheck(this.params);
    },
    "rotateType":function (){
      if(this.rotateType === 21 ||this.rotateType === 22){
        interferenceCheckCommand.setSelectEnable(false);
        this.params.canDrag = true;
        if(this.rotateType === 22){
          this.setActiveMap("revolveAxis");
        }else{
          this.setActiveMap("selInstance");
        }
      }else{
        interferenceCheckCommand.setSelectEnable(true);
        this.params.canDrag = false;
        this.setActiveMap("selInstance");
      }
      //修改应用按钮显示状态
      if(this.rotateType === 23){
        this.applyShow = true;
      }else{
        this.applyShow = false;
      }

      this.params.transformType = this.rotateType;
      interferenceCheckCommand.calculateTransformInterferenceCheck(this.params);
    },
    "params.curTab":function (){
      if(this.params.curTab === "TabMove"){
        if(this.moveType === 11 ||this.moveType === 12 ||this.moveType === 13){
          interferenceCheckCommand.setSelectEnable(false);
          this.params.canDrag = true;
        }else{
          interferenceCheckCommand.setSelectEnable(true);
          this.params.canDrag = false;
        }
        this.params.transformType = this.moveType;
        interferenceCheckCommand.calculateTransformInterferenceCheck(this.params);
      }else{
        if(this.rotateType === 21 ||this.rotateType === 22){
          interferenceCheckCommand.setSelectEnable(false);
          this.params.canDrag = true;
        }else{
          interferenceCheckCommand.setSelectEnable(true);
          this.params.canDrag = false;
        }
        this.params.transformType = this.rotateType;
        interferenceCheckCommand.calculateTransformInterferenceCheck(this.params);
      }
    },
  },
}
</script>

<style scoped>
.wrap {
    font-size: 12px;
}

label {
    color: var(--text-color1);
}

>>> .queryList {
    margin-top: 7px;
    margin-bottom: 0 !important;
}
.error-style {
    color: red;
}
</style>